<template>
  <form id="pwd-form">
    <div v-if="step === 0" style="margin-left: 27px;">
      <div class="input-group reg-login-div">
                    <span class="input-group-addon icon-user" id="basic-addon12">
                    </span>
        <input type="text" class="form-control login-input" style="width: 262px"
               name="username" placeholder="用户名或手机号二选一填写即可" aria-describedby="basic-addon12">
      </div>
      <div class="input-group reg-login-div">
                    <span class="input-group-addon icon-phone" id="basic-addon10">
                    </span>
        <input type="text" name="mobile" class="form-control login-input" style="width: 262px"
               placeholder="用户名或手机号二选一填写即可" aria-describedby="basic-addon10">
      </div>
      <div class="input-group reg-login-div">
                    <span class="input-group-addon icon-verification" id="basic-addon11">
                    </span>
        <input type="text" class="form-control login-input" style="width: 152px"
               name="code" placeholder="验证码" aria-describedby="basic-addon11">
        <button class="btn btn-info" id="pwd-validate-button"
                style="width: 100px;height:42px;margin-left: 10px;" type="button">获取验证码
        </button>
      </div>
      <button class="btn btn-primary" style="width: 300px;height: 42px;"
              v-on:click="step += 1" type="button">
        下一步
      </button>
    </div>
    <div v-else-if="step === 1" style="margin-left: 27px;">
      <div class="input-group reg-login-div">
                    <span class="input-group-addon icon-password" id="basic-addon13">
                    </span>
        <input type="password" class="form-control login-input" style="width: 262px"
               name="password" placeholder="密码" aria-describedby="basic-addon13">
      </div>
      <div class="input-group reg-login-div">
                    <span class="input-group-addon icon-password" id="basic-addon14">
                    </span>
        <input type="password" class="form-control login-input" style="width: 262px"
               name="password_repeat" placeholder="确认密码" aria-describedby="basic-addon14">
      </div>
      <input type="number" name="type" hidden value=2>
      <button id="pwd-click-button" class="btn btn-primary" style="width: 300px;height: 42px;"
              type="button">
        完成，登录
      </button>
    </div>
  </form>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        step: 0
      }
    },
    methods:{

    }
  }
</script>

<style>
  .icon-user {
    background-image: url(../../assets/images/reg-login/icon_user.png);
  }
  .icon-password {
    background-image: url(../../assets/images/reg-login/icon_password.png);
  }
  .icon-phone {
    background-image: url(../../assets/images/reg-login/phone.png);
  }
  .icon-verification {
    background-image: url(../../assets/images/reg-login/verification.png);
  }
</style>
